<!DOCTYPE html>
<html lang="zh_CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./CSS/reset.css">
    <title>DOM增删改查</title>
    <style>
        #total {
            width: 300px;
            height: 150px;
            margin: 0 auto;
            border: 1px solid #000;
        }

        #total #city li {
            float: left;
            padding-left: 5px;

            width: 35px;
            height: 20px;
            border: 1px solid #000;
            background-color: #bfa;
        }

        .btnList {
            width: 200px;
            height: 100px;
            margin: 0 auto;
        }
    </style>
    <script>
        window.onload = function () {
            //增
            myClick("btn01", function () {
                var li = document.createElement("li");

                var CityText = document.createTextNode("广州");

                li.appendChild(CityText);

                var city = document.getElementById("city");

                city.appendChild(li);

            });
            myClick("btn02", function () {
                var li = document.createElement("li");

                var CityText = document.createTextNode("广州");

                li.appendChild(CityText);

                var bj = document.getElementById("bj");

                var city = document.getElementById("city");
                city.insertBefore(li, bj);

            });
            //替换
            myClick("btn03", function () {
                var li = document.createElement("li");

                var CityText = document.createTextNode("广州");

                li.appendChild(CityText);

                var bj = document.getElementById("bj");

                var city = document.getElementById("city");
                city.replaceChild(li, bj);

            });
            //删除
            myClick("btn04", function () {

                var bj = document.getElementById("bj");

                //    var city = document.getElementById("city");
                //    city.removeChild(bj);
                bj.parentNode.removeChild(bj);

            });
            //查
            myClick("btn05", function () {

                var city = document.getElementById("city");
                alert(city.innerHTML);

            });
            myClick("btn06", function () {

                var bj = document.getElementById("bj");

                bj.innerHTML = "南京";

            });
            //增
            myClick("btn07", function () {

                var city = document.getElementById("city");
                city.innerHTML += "<li>广州</li>";
            });
        };
        function myClick(idStr, fun) {
            var btn = document.getElementById(idStr);
            btn.onclick = fun;
        };
    </script>
</head>

<body>
    <div id="total">
        <p>
            你喜欢哪个城市？
        </p>
        <ul id="city">
            <li id="bj">北京</li>
            <li>上海</li>
            <li>东京</li>
            <li>首尔</li>
        </ul>
    </div>
    <div class="btnList">
        <div><button id="btn01">创建一个"广州"节点,添加到#city下</button></div>
        <div><button id="btn02">将"广州"节点插入到#bj前面</button></div>
        <div><button id="btn03">使用"广州"节点替换#bj节点</button></div>
        <div><button id="btn04">删除#bj节点</button></div>
        <div><button id="btn05">读取#city内的HTML代码</button></div>
        <div><button id="btn06">设置#bj内的HTML代码</button></div>
        <div><button id="btn07">向city中添加广州</button></div>
    </div>
</body>

</html>